<template>
    <div>
        <el-dialog title='教学记录' :visible.sync="isShow" @close="onClose" width="60%" :key="dialogKey">
            <div class="common-view1" v-if="teachRecordList.length > 0">
              <div class="div-box-wrap" v-for="(item,index) in teachRecordList">
                <div class="div-title-view">教学记录&nbsp;&nbsp;({{ index + 1 }})</div>
                <div class="div-box">
                  <div class="box-title">教学目标</div>
                  <div class="box-content">{{item.target ? item.target: '无'}}</div>
                </div>

                <div class="div-box">
                  <div class="box-title">教学内容</div>
                  <div class="box-content">{{item.content ? item.content: '无'}}</div>
                </div>

                <div class="div-box">
                  <div class="box-title">完成情况</div>
                  <div class="box-content">{{item.completed ? item.completed: '无'}}</div>
                </div>

                <div class="div-box">
                  <div class="box-title">课后练习</div>
                  <div class="box-content">{{item.expand ? item.expand: '无'}}</div>
                </div>

              </div>

              <div class="common-button-wrap">
                <el-button type="primary" @click="querySign">查看家长签字</el-button>
              </div>
            </div>

          <div  class="common-view1"  v-else style="text-align: left;font-size: 0.1rem;">
            无
          </div>
        </el-dialog>

      <el-dialog title='签名' :visible.sync="isSignNameShow" @close="onSignClose" width="40%">
        <div class="common-view1">
          <el-image class="header-img-view" :src="base64SignNameString" fit="cover"></el-image>
        </div>
      </el-dialog>
    </div>
</template>
<script>
    import {getStudentTeachPlan,getTeachPlanSign} from '@/api/student.js'
    export default {
        props: ['isShowDialog', 'selectStudentId',"selectTime"],
        data() {
            return {
                studentId: this.selectStudentId,
                time: this.selectTime,
                planId: undefined,
                isSignNameShow: false,
                base64SignNameString: '',
              //   是否显示当前dialog
                isShow: this.isShowDialog,
                dialogKey: Math.random(),
                teachRecordList: [],
                indexDesc: ['一','二','三','四','五','六','七','八','九','十']
            }
        },
        watch: {
            selectStudentId: {
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            }
        },
        created() {
          this.getData();
        },
        computed: {},
        mounted() {
        },
        methods: {
          onSignClose(){
            this.isSignNameShow = false
          },
          //关闭弹窗清空表单
          onClose() {
            this.$emit('closeTeachRecordStatistics')
          },
          getData() {
            //todo 一会修改为正式数据
            let timeArr = this.time.split("-");
            /*let timeArr = [2023,3,1];
            this.studentId = 63*/
            let dataForm = {
              planType: 1,
              studentId: this.studentId,//this.studentId 63
              year: timeArr[0]?timeArr[0]:'',
              month: timeArr[1]?timeArr[1]:'',
              day: timeArr[2]?timeArr[2]:'',
            }
            console.log("获得日教学记录传递参数：",dataForm);
            getStudentTeachPlan(dataForm).then(res => {
              console.log(res)
              this.teachRecordList = []
              if (res.code == 200){
                if (res.data && res.data.length != 0){
                  this.teachRecordList = res.data
                  this.planId = res.data[0].plan_id
                }
              }else{
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }
            })
          },
          querySign(){
            if (!this.planId){
              this.$message({
                type: 'warning',
                message: '暂无计划'
              });
              return
            }
            //todo 一会修改为正式数据
            getTeachPlanSign({
              planId: this.planId, //this.planId 574
            }).then((res) => {
              console.log("家长签名：",res);
              if (res.code == 200){
                if(res.data && res.data.replace(" ","").length > 0){
                  this.isSignNameShow = true;
                  this.base64SignNameString = res.data
                }else{
                  this.$message({
                    type: 'warning',
                    message: '暂无签名'
                  });
                }
              }else{
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }
            });
          },
        }
    }
</script>
<style lang="scss" scoped>
    .common-view1 {
        width: 100%;
        height: calc(60vh);
        padding: 5px;
        overflow: auto;
        .common-button-wrap{
          margin-top: 15px;margin-bottom: 15px;display: flex;flex-direction: row;justify-content: center;
          .el-button{
            width: 180px;
          }
        }
        .div-box{
          .box-title{
            font-size: 0.09rem;
            font-weight: bold;
            text-align: left;
          }
          .box-content{
            border: 1px solid #e1e1e1;
            border-radius: 5px;
            text-align: left;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 10px;
            color: #9E9E9E ;
            font-size: 0.08rem;
          }
        }
        .div-title-view {
          color: #11A2F0;
          margin-bottom: 10px;
          margin-top: 10px;
          font-size: 0.09375rem;
        }

      .header-img-view{
        width: 500px;
        height: 500px;
        border: 1px solid;
        border-radius: 10px;
      }
    }


    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.12rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }



</style>

